<!-- 角色管理 -->
<template>
    <div id="role">
        <!--<el-row >  默认占满屏 一用就把左边的覆盖了，不知道为什么 -->
        <!-- 搜索的时候按照 工厂、部门、员工号、 -->
        <div style="width: 100%;height: 85px;background-color: #FAFAFA;padding-top: 1%;">
            <el-col :xs="2" :sm="2" :md="2" :lg="2" style="margin:0 1%">
                <el-input placeholder="角色名称" v-model="RoleName"></el-input>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" style="text-align: left">
                <el-button type="primary" @click="selectTable">查询</el-button>
                <el-button type="success" @click="add">新增角色</el-button>
            </el-col>
        </div>
        <!-- max-height 600时就固定表头，显示滚动条  show-overflow-tooltip 表格内容多了可以显示一个提示框显示剩余内容   sortable排序 -->
        <el-table  max-height="600" class="table_role" stripe border ref="multipleTable" :data="tableData" tooltip-effect="dark"
                   style="width: 88%;text-align: center !important;">
            <el-table-column prop="index" sortable width="60"></el-table-column>
            <el-table-column prop="RoleCode" sortable label="角色号"></el-table-column>
            <el-table-column prop="RoleName" label="角色名"></el-table-column>
            <el-table-column prop="RoleDescribe" sortable label="角色描述"></el-table-column>
<!-- 系统记录的时间和操作人员 -->
            <el-table-column prop="OperationUser" v-if="false" sortable label="操作人员工号"></el-table-column>
            <el-table-column prop="OperationUserName" sortable label="操作人员"></el-table-column>
            <el-table-column prop="ModifyDate" sortable label="时间"></el-table-column>
            <!--修改和删除 -->
            <el-table-column label="操作" fixed="right">
                <template scope="scope">
                    <el-button size="small"
                               @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="danger"
                               @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页 -->
        <div class="block" style="text-align: right;padding: 4% 1% 0 0">       <!-- , jumper 加到layout里面 前往第 几 页     -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="PageCount" :page-sizes="[10, 20, 30, 40,50]"
                           :current-page="CurrentPage"  layout="total,sizes, prev, pager, next" :total="Total"></el-pagination>
        </div>
        <!-- 新增角色 -->
        <el-dialog title="新增角色" :visible.sync="addFormVisible">
            <el-form :model="form" style="text-align: left">
                <!-- 角色号不用新增 -->
                <el-form-item label="角色名称" :label-width="formLabelWidth">
                    <el-input v-model="form.RoleName" auto-complete="off" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" :label-width="formLabelWidth">
                    <el-input v-model="form.RoleDescribe" auto-complete="off" style="width: 80%"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addForm">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改角色 -->
        <el-dialog title="修改角色" :visible.sync="EditFormVisible">
            <el-form :model="formEdit" style="text-align: left">
                <el-form-item label="角色号" :label-width="formLabelWidthEdit">
                    <!--  角色号显示到这边，但不能修改  -->
                    <el-input v-model="formEdit.RoleCode" :disabled="true" style="width: 80%;"></el-input>
                </el-form-item>
                <el-form-item label="角色名称" :label-width="formLabelWidthEdit">
                    <el-input v-model="formEdit.RoleName" auto-complete="off" style="width: 80%;"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" :label-width="formLabelWidthEdit">
                    <el-input v-model="formEdit.RoleDescribe" auto-complete="off" style="width: 80%;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="EditFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="EditForm">提 交</el-button>
            </div>
        </el-dialog>
        <!-- 删除人员 -->
        <el-dialog title="删除角色" :visible.sync="DeleteFormVisible">
            <el-form :model="formDelete">
                <el-form-item style="font-size: 18px;">
                    确定删除此角色吗？
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="DeleteFormVisible = false">取 消</el-button>
                <el-button type="danger" @click="DeleteForm" >确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
    export default{
        data(){
            return{
                //    表格
                tableData:[],
                RoleName:'',
                //     分页
                PageCount:10,    // 每页几条   page-size
                CurrentPage:1,   // 当前是第几页
                Total:0,         // 总数
                multipleTable:[],
                //   新增角色    将 form表单改成自己的参数
                addFormVisible: false,
                form: {
                    RoleName:'',
                    RoleDescribe:'',
                },
                formLabelWidth: '100',
                //  修改角色
                EditFormVisible: false,
                formEdit:{
                    RoleCode:'' ,     //   编辑的时候传一个员工号
                },
                formLabelWidthEdit:'100',
                // 删除人员
                DeleteFormVisible: false,
                formDelete:{},
                formLabelWidthDelete:'100',
            }
        },
        methods:{
        //    分页
            handleSizeChange(val) {
                this.PageCount = val ;   //  每页几条
                this.selectTable();
            },
            handleCurrentChange(val) {
                this.CurrentPage = val ;   // 当前是第几页
                this.selectTable();     //  点击分页的时候
            },
            selectTable(){    // 校验输入信息正确性 ，不对直接  return
                let url;
                this.isLoding=true;
                url = "http://192.168.3.238:8088/RoleInfo/GetRoleInfoPage?RoleName=" + this.RoleName + "&PageCount="+this.PageCount+"&CurrentPage="+ this.CurrentPage;
                console.log("表格")
                console.log(url)
                this.$http.get(url,).then(response=>{
                    // success callback   需要一个alert告诉你查询到了
                    this.tableData=[];
                let Code = response.data.Code;
                if(Code == 200){   // 正常请求到数据
                    this.Total = response.data.Total;
                    for(let i=0;i<response.data.ObjList.length;i++){
                        this.tableData.push(response.data.ObjList[i]);
                        response.data.ObjList[i].index=i+1;
                    }
                }
                console.log(response)
            }, response => {
                    console.log(" 表格添加失败")
                    console.log(response)
                })
            },
        //   新增角色
            add() {
                this.addFormVisible = true;
            },
            addForm(){     //   post
                let addUrl = "http://192.168.3.238:8088/RoleInfo/AddRoleInfo";
                let addForm = {
                    "OperationUser":1,  //  当前是谁操作的 新增功能
                    "RoleName": this.form.RoleName ,
                    "RoleDescribe":this.form.RoleDescribe,
                };
                let that = this;
                if (this.form.RoleName.length === 0) {   //  限制条件是什么？？？？
                    console.log("请输入角色名称");
                    return 0;
                } else {
                    this.$http.post(addUrl, addForm, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                        .then(function (response) {
                            that.addFormVisible = false;
                            that.selectTable();
                            console.log("角色添加成功》》》》》》》》》");
//                        需要提示
                        })
                        .catch(function (error) {
                            console.log(error);
                            console.log("错误");
                        });
                }
            },
        //   编辑  角色     post
            handleEdit(index, row) {
                this.EditFormVisible = true;
                this.formEdit = row ;
                console.log("修改》》》》》》》》》》》》角色获取的全部字段");
                console.log(this.formEdit);
                //  角色号不能修改，只是作为参数传给后台
            },
            EditForm() {    //   post
                let EditUrl = "http://192.168.3.238:8088/RoleInfo/UpdateRoleInfo";
                let EditForm = {
                    "OperationUser":this.formEdit.OperationUser,  //  当前是谁操作的 新增功能
                    "RoleCode": this.formEdit.RoleCode ,
                    "RoleName": this.formEdit.RoleName ,
                    "RoleDescribe":this.formEdit.RoleDescribe,
                };
                let that = this ;
                this.$http.post(EditUrl, EditForm, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        that.EditFormVisible = false;
                        that.selectTable();
                        console.log("修改角色成功");
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });
            },
        //    删除   角色
            handleDelete(index, row) {
                this.DeleteFormVisible = true ;
                this.formDelete = row ;
            },
            DeleteForm(){
                let DeleteUrl = "http://192.168.3.238:8088/RoleInfo/DeleteRoleInfo";
                let deleteItem = {   //  跟后端约定好的JSON格式
                    "OperationUser":this.formDelete.OperationUser,  //  当前是谁操作的 新增功能
                    "RoleCode": this.formDelete.RoleCode ,
                };
                console.log("删除角色》》》》》》》》》》》》》》》》》")
                console.log(DeleteUrl)
                console.log(deleteItem)
                let that = this;  //   that管用吗   管用的，想自动刷新就在执行成功的方法里重新  searchTable 就行了
                this.$http.post(DeleteUrl, deleteItem, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        console.log("删除成功")
                        that.DeleteFormVisible = false;     //  关闭窗口
                        that.selectTable();
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });
            },
        },
        mounted:function(){   //  onload
            this.selectTable();    //  请求到表格
        }
    }
</script>

<style>
    * {
        padding: 0;
    }

    html,
    body {
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin: 0;
    }

    #role {
        height: 100%;
    }
    /* 表头数据居中 */
    .table_role thead tr th {
        text-align: center;
    }
</style>